<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" content="拉单" />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 保 存</el-button>
          <el-button @click="goBack"> 取 消</el-button>
        </div>
      </div>
      <el-table :data="tableData" stripe style="width: 100%" ref="multipleTable" v-loading="listLoading"

    tooltip-effect="dark"
@row-click="openDetails"
    @selection-change="handleSelectionChange">
    <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="billcode_name" label="单据号" align="left" />

       <el-table-column prop="billdate_name" label="单据日期" align="left" />

       <el-table-column prop="creatoruserid_name" label="制单人" align="left" />

       <el-table-column prop="usedept_name" label="使用部门" align="left" />

       <el-table-column prop="user_name" label="使用人" align="left" />

       <el-table-column prop="approvetime_name" label="审批时间" align="left" />

       <el-table-column prop="approveuser_name" label="审批人" align="left" />

       <el-table-column prop="lastmodifyuserid_name" label="修改用户" align="left" />

       <el-table-column prop="lastmodifytime_name" label="修改时间" align="left" />
      </el-table>
      <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
        @pagination="getList" />
        <el-table :data="tableDataB" stripe style="width: 100%" ref="multipleTable" v-loading="listLoading"

        tooltip-effect="dark"

        @selection-change="handleSelectionChange">
        <el-table-column
              type="selection"
              width="55">
            </el-table-column>
           <el-table-column prop="matcode" label="物料名称" align="left" />

           <el-table-column prop="matcode_F_MatCode" label="物料编码" align="left" />

           <el-table-column prop="matcode_F_MatSpec" label="物料规格" align="left" />

           <el-table-column prop="suppliercode" label="供应商编码" align="left" />

            <el-table-column prop="suppliercode_F_Name" label="供应商名称" align="left" />

           <el-table-column prop="num" label="数量" align="left" />

           <el-table-column prop="price" label="单价" align="left" />

           <el-table-column prop="amount" label="金额" align="left" />

           <el-table-column prop="demandtime" label="需求时间" align="left" />
            <el-table-column prop="usedept" label="使用部门" align="left" />
             <el-table-column prop="user" label="使用人" align="left" />
              <el-table-column prop="plannumid" label="计划号" align="left" />
                <el-table-column prop="lastmodifytime_name" label="物料附件" align="left" />
                <el-table-column prop="supplierenclosure" label="供应商附件" align="left" />
                </el-table>
          </el-table>
    </div>
  </transition>
</template>
<script>
  import request from '@/utils/request'
  import {getGyPurApplyBList} from '@/api/extend/gypurapply'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'
  export default {
    components: {},
    props: [],
    data() {
      return {
        listLoading:true,
        multipleSelection: [],
        total: 0,
        listQuery: {
          superQueryJson: '',
          currentPage: 1,
          pageSize: 50,
          sort: "desc",
          sidx: "code",
        },
        tableData: [],
        tableDataB: [],
        visible: false,
        loading: false,
        btnLoading: false,
        selectDialogVisible: false,
        currTableConf: {},
        addTableConf: {},
        tableRows: {},
        currVmodel: "",


      }
    },
    computed: {
      menuId() {
        return this.$route.meta.modelId || ''
      }
    },
    watch: {},
    created() {
     
    },
    mounted() {},
    methods: {
      openDetails(row){
        console.log(row.id)
        this.getGyPurApplyBList(row.id)
      },
      getGyPurApplyBList(id){

        getGyPurApplyBList(id).then(res =>{
          console.log(res)
          this.tableDataB=res.data
        })
      },
 handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      getList() {
       this.listLoading = true;
       let _query = {
         ...this.listQuery,
         ...this.query,
         dataType: 0,
         menuId: this.menuId
       };
       request({
         url: `/api/example/GyPurApply/getList`,
         method: 'post',
         data: _query
       }).then(res => {
         var _list = [];
         for (let i = 0; i < res.data.list.length; i++) {
           let _data = res.data.list[i];
           for (let k = 0; k < _data.children.length; k++) {
             let children = _data.children[k];
             console.log(children)
             this.tableData.push(children)
             children.tableField116Expand = false
             for (let z = 0; z < children.tableField116.length; z++) {
               let tableField116 = children.tableField116[z];
               tableField116.demandtime = this.jnpf.toDate(tableField116.demandtime, 'yyyy-MM-dd HH:mm:ss')






             }
           }
           _list.push(_data)
         }
         this.list = _list.map(o => ({
           top: true,
           ...o
         }))
          this.total = res.data.pagination.total
         this.listLoading = false
        })
      },
      goBack() {
        this.$emit('refresh')
      },


      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            this.request()
          }
        })
      },
      request() {
        this.btnLoading = true
        let _data = this.dataList()
        if (!this.dataForm.id) {
          request({
            url: '/api/example/GyPlanNum',
            method: 'post',
            data: _data
          }).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.btnLoading = false
                this.$emit('refresh', true)
              }
            })
          }).catch(() => {
            this.btnLoading = false
          })
        } else {
          request({
            url: '/api/example/GyPlanNum/' + this.dataForm.id,
            method: 'PUT',
            data: _data
          }).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.btnLoading = false
                this.$emit('refresh', true)
              }
            })
          }).catch(() => {
            this.btnLoading = false
          })
        }
      },

    },
  }
</script>
